<template>
	<view class="goods">
		<!-- 单个商品 -->
		<view class="goods-item" v-for="(item,index) in dataList" :key="index" @tap="goDetails">
			<image class="goods-img" :src="item.image" mode=""></image>
			<view class="goods-content">
				<text class="goods-text">
					{{item.name}}
				</text>
				<view class="price">
					<text class="newprice">￥{{item.newprice}}</text>
					<text class="oldprice">￥{{item.oldprice}}</text>
				</view>
				<text class="discount">{{item.discount}}折</text>
				
			</view>
		</view>
		<!-- <view class="goods-item">
			<image class="goods-img" src="https://pic2.zhimg.com/v2-a9ffec59be5dd49908d14f028d6aeb31_b.jpg" mode=""></image>
			<view class="goods-content">
				<text class="goods-text">
					最新版钢笔款2023年必须买，不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就亏本了，爆款直售，走过路过不要错过！
				</text>
				<view class="price">
					<text class="newprice">￥98</text>
					<text class="oldprice">￥128</text>
				</view>
				<text class="discount">5.2折</text>
				
			</view>
		</view> -->
	</view>
</template>

<script>
	export default{
		props:{
			dataList:Array
		},
		methods:{
			goDetails(){
				uni.navigateTo({
					url:'/pages/details/details'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods{
		font-size: 32rpx;
		display: flex;
		flex-wrap: wrap;
		.goods-item{
			width: 375rpx;
			padding-bottom:20rpx ;
		}
		.goods-img{
			width: 100%;
			height: 375rpx;
		}
		.goods-content{
			text-align: center;
		}
		.goods-text{
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient:vertical;
			color: #333333;
			word-break: break-all;
			padding: 6rpx 20rpx;
		}
		.price{
			margin-bottom: 10rpx;
			.oldprice{
				text-decoration: line-through;
				font-size: 24rpx;
				color: #999999;
			}
			.newprice{
				font-size: 32rpx;
			}
		}
		.discount{
			margin-top: 10rpx;
			border-radius: 4rpx;
			border: 1px solid #FF3333;
			padding: 1rpx 10rpx;
			color: #FF3333;
		}
	}
</style>